<template>
  <div id="main">
    <el-card class="add-box-card">
      <div slot="header" class="box-card-title">
        <span>添加楼栋信息</span>
      </div>

      <el-form class="demo-ruleForm edit-form" :model="editFormData" label-width="120px" label-position="left" :rules="rules" ref="ruleForm"  >
        <el-form-item class="edit-form-item-with-des" label="楼栋名称：" prop="buildingNum" >
          <el-input class="edit-form-input" v-model="editFormData.buildingNum" placeholder='请输入楼栋名称'></el-input><span></span>
        </el-form-item>
        <el-form-item label="最高层数：" class="edit-form-item-with-des" prop="roofNum">
          <el-input class="edit-form-input" type="number" :min="1" v-model="editFormData.roofNum" placeholder='请输入楼层'></el-input><span></span>
        </el-form-item>
      </el-form>
    </el-card>

    <div class="footer">
      <el-button class="greenButton" type="primary" @click="tianjia('ruleForm')">提交</el-button>
    </div>
  </div>
</template>

<script>

export default {
  data: function() {
    return {
      editFormData: {
        buildingNum: "",
        roofNum: ""
      },
      rules:{
         buildingNum: [{ required: true, message: '请输入楼栋名称', trigger: 'blur' }],
        roofNum: [{ required: true, message: '请输入楼层', trigger: 'blur' }]
        },
      orderRulesOptions: []
    };
  },
  methods:{
    // 添加 楼层
    
    tianjia(formName){
      this.$refs[formName].validate((valid) => {
          if (valid) {
            console.log(this.editFormData)
      if(this.editFormData.roofNum < 0){
        this.$message({
                            message: '层数必须为你正整数',
                            type: 'error',
                            duration:'2000'
                          });
                          return

      }
      let param = {
         f_name:this.editFormData.buildingNum,
         f_num:this.editFormData.roofNum
      }
      this.ajaxCommon.ajax({
                    url: 'addlou',
                    data: param,
                    success: (res) => {
                      console.log(res)
                      if(res.code == 200){
                         this.$message({
                            message: res.status,
                            type: 'success',
                            duration:'2000'
                          });
                          this.editFormData = {
                             buildingNum: "",
                             roofNum: ""
                           }
                      }else{
                         this.$message({
                            message: res.status,
                            type: 'success',
                            duration:'2000'
                          });
                      }
                     
                    }
                });
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      
      
      },
    }
  
};
</script>

<style lang="less" scoped>
#main {
  width: 100%;
  .add-box-card {
    border: 1px solid #00bdac;
    box-shadow: 0px 4px 16px 0px rgba(0, 201, 212, 0.14);
    height: 480px;
    .box-card-title {
      background-color: #00bdac;
      height: 36px;
      line-height: 36px;
      padding-left: 30px;
      font-size: 14px;
      color: #ffffff;
    }
  }

  .footer {
    width: 100%;
    text-align: right;
    margin-top: 20px;
  }

  .edit-form-input{
    width: 260px;
  }

  .edit-form-item-with-des{
    span{
      margin:0 20px;
      display: inline-block;
      min-width: 30px;
    }
  }
}
</style>

<style lang="less">
.add-box-card {
  .el-card__header {
    padding: 0;
  }
}
</style>
